import './index.less';
import Utils from "../../../common/utils.js";
// 弹窗
import Dialog from '../../../components/h5/dialog';
// 主页
import galleryListView from "./index.html";
import headerPartial from "../index/partial/header.html";
import list3 from "../index/partial/newslist.html";

// 接口服务
import IndexService from "../../../services/indexService.js";
const indexService = new IndexService();

export default class GalleryList {
    constructor() {
        this.beginScroll = true;
        this.request = true;
        this.galleryContainer = $(".gallery-container");
        this.complied = _.template(galleryListView);
        this.compliedHeaderPartial = _.template(headerPartial);
        this.compliedList3 = _.template(list3);
        this.start = 1;
        this.length = 20;
        this.token = Utils.GetToken();
        console.log("token是",this.token)
        if (this.token == '') {
            alert("无法获取token")
        }
        this.render();
        this.isMore = true;
    }
    //渲染页面
    async render() {
        let _this = this;
        var liveList = [];
        // //调用接口服务，获取后端的数据
        let result = await indexService.getLiveFavorites(this.token,{
            start: _this.start,
            length: _this.length
        }); 
        console.log("result", result)
        if (result.code == 200) {
            liveList = result.data;
            if (liveList.length >= _this.length) {
                _this.start = _this.start + 1;
            } else {
                //已无更多数据，不再加载。
                _this.isMore = false;
            }
        } else {
            alert(result.message)
        }

        //加载header
        let headerHtml = _this.compliedHeaderPartial({
            data: 4,
            token: _this.token
        });
        setTimeout(() => {
            $(".header-container").html(headerHtml);
        }, 20);

        //整个页面列表
        let galleryListHtml = this.complied({});
        $(".content").html(galleryListHtml);
        //更新新闻视图
        let List3Html = _this.compliedList3({
            liveList3: liveList,
        });
        $(".news_container").html(List3Html);
        this.registerEvents();
    }

    //绑定事件
    registerEvents() {
        let _this = this;
        //相关视频
        $('.video_container').delegate(".news", "click", function() {
            var id = $(this).attr('data-id')
            if ($(this).attr('data-status') == 'end') {
                window.location = `/video.html?id=${id}&token=${_this.token}`
            } else {
                window.location = `/live.html?id=${id}&token=${_this.token}`
            }

        });


        function debounce(fn, wait) {
            var timeout = null;
            return function() {
                if (timeout !== null) clearTimeout(timeout);
                timeout = setTimeout(fn, wait);
            }
        }

        async function handle() {
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();
            if (scrollTop + windowHeight +5 >= scrollHeight) {
                if (_this.isMore == false) {
                    console.log("无需加载了")
                    return;
                }
                console.log("jiazai")
                let result = await indexService.getLiveFavorites(_this.token,{
                    start: _this.start,
                    length: _this.length
                }); 
                console.log("result", result)
                if (result.code == 200) {
                    liveList = result.data;
                    if (liveList.length >= _this.length) {
                        _this.start = _this.start + 1;
                    } else {
                        //已无更多数据，不再加载。
                        _this.isMore = false;
                    }
                } else {
                    alert(result.message)
                }
                //更新视图
                let List3Html = _this.compliedList3({
                    liveList3: liveList,
                });
                $(".news_container").append(List3Html);
            }
        }
        //滚动加载
        window.addEventListener('scroll', debounce(handle, 300));

    }

}